<template>
  <div>
    <el-card class="doing">
      <el-row type="flex">
        <el-col :span="20" class="title">执行中的任务</el-col>
        <el-col :span="4" class="more">
          <span @click="
            () => {
              $router.push('/allDoing');
            }">
            更多>
          </span>
        </el-col>
      </el-row>
      <div class="table-demo-wrapper">
        <ul class="table-header">
          <li>
            <span>序号</span>
            <span>负责人</span>
            <span>任务名称</span>
            <!-- <span>版本</span> -->
          </li>
        </ul>
        <vueSeamlessScroll :data="doingList" class="seamless-warp" :class-option="optionSetting">
          <ul class="list" :style="'height:' + doingList.length * 38 + 'px;'" @mousemove="stopScroll"
            @mouseout="doScroll">
            <li :class="{ devicelistitem: true, even: (index + 1) % 2 !== 0 }" v-for="(item, index) in doingList"
              :key="index">
              <span :title="item.serialNum">{{ item.serialNum }}</span>
              <span :title="item.userName">{{ item.userName }}</span>
              <span :title="item.taskName"  class="projectClass">{{item.taskName}}</span>
              <!-- 点击事件 -->
              <!--style="cursor: pointer"  @click="gotoPath(item)" -->
              
              <!-- <span :title="item.verNumber">{{ item.verNumber }}</span> -->
            </li>
          </ul>
        </vueSeamlessScroll>
        <!-- <el-table :data="doingList" type="flex" style="width: 100%" border :class-option="optionSetting" class="seamless-warp">
          <el-table-column type="index" label="序号" width="80" align="center"></el-table-column>
          <el-table-column prop="userName" label="负责人" align="center"></el-table-column>
          <el-table-column prop="taskName" label="任务名称" align="center"></el-table-column>
        </el-table> -->
      </div>
    </el-card>
  </div>
</template>

<script>
import { getExecutingList } from "@/service/workbenchApi";
import vueSeamlessScroll from "vue-seamless-scroll";

export default {
  name: "doing",
  components: { vueSeamlessScroll },
  data() {
    return {
      allowScroll: true,
      doingList: [], //管理员看到的执行中任务
    };
  },
  methods: {
    gotoPath(item) {
      this.$router.push({
        path: "/progressManager",
        query: {
          projectId: item.projectId,
          projectName: item.projectName,
        },
      });
    },
    getData() {
      getExecutingList().then((res) => {
        if (res.code == 0) {
          this.doingList = res.data;
        }
      });
    },

    goMore() {

    },

    stopScroll() {
      this.allowScroll = false;
    },
    doScroll() {
      this.allowScroll = true;
    },

  },
  computed: {
    optionSetting() {
      return {
        step: 0.2, // 数值越大速度滚动越快
        limitMoveNum: 6, // 开始无缝滚动的数据量 this.dataList.length
        hoverStop: true, // 是否开启鼠标悬停stop
        direction: 1, // 0向下 1向上 2向左 3向右
        openWatch: true, // 开启数据实时监控刷新dom
        singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
        waitTime: 1000, // 单步运动停止的时间(默认值1000ms)
      };
    },
  },
  created() {
    this.getData();
  },
  mounted() {
  },
};
</script>

<style lang="scss" scoped>
.projectClass {
  width: 100%;/*一定要设置宽度，或者元素内含的百分比*/
  overflow: hidden;/*溢出的部分隐藏*/
  white-space: nowrap;/*文本不换行*/
  text-overflow: ellipsis;/*ellipsis:文本溢出显示省略号（...）；clip：不显示省略标记（...），而是简单的裁切*/
}

.table-demo-wrapper {
  .projectClass:hover {
    color: #00b98d !important;
  }

  margin-top: 10px;
  width: 100%;
  max-height: 230px;
  box-sizing: border-box;
  // padding: 20px 26px 0;
  overflow: hidden;
  background: #f9f9f9;

  .table-header {
    margin: 0px;

    li {
      height: 38px;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      padding-left: 10px;

      span {
        line-height: 40px;
        flex: 2;
        font-size: 14px;
        font-family: FZZhengHeiS-M-GB;
        font-weight: 700;
        color: #909399;
        text-align: left;

        &:nth-child(1) {
          flex: 1;
        }

        &:nth-child(4) {
          flex: 1;
        }
      }
    }
  }

  .seamless-warp {
    overflow: hidden;

    .list {
      overflow: hidden;

      .devicelistitem {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        height: 38px;
        padding-left: 10px;

        span {
          flex: 2;
          font-size: 14px;
          font-family: PingFang SC;
          font-weight: 400;
          color: #606266;
          text-align: left;

          &:nth-child(1) {
            flex: 1;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            padding-left: 5px;
          }

          &:nth-child(4) {
            flex: 1;
          }
        }
      }

      .even {
        background: #fff;
      }
    }
  }
}

.doing {
  width: 100%;

  // margin-top: 10px;
  .title {
    font-size: 18px;
    color: #303133;
    font-weight: bold;
  }

  .more {
    cursor: pointer;
  }

  .more:hover {
    color: red;
  }

  .first {
    margin-top: 20px;
  }
}</style>